<template>
	<view class="container">
		<view class="title">名字</view>
		<input type="text" value="" v-model="info.name" class="uinp" placeholder="请输入你的真实姓名" />
		<view class="title">手机号</view>
		<input type="text" value="" v-model="info.phone" class="uinp" placeholder="请输入你的手机号码" />
		<view class="title">联系地址</view>
		<input type="text" value="" v-model="info.address" class="uinp" placeholder="请输入你现在住的地址" />
		<view class="title">加盟区域</view>
		<!-- <input type="text" value="" class="uinp" placeholder="请选择你想要加盟的省" /> -->
		<picker @change="bindPickerChange" :value="info.joinCity" :range="provinces" :range-key="'name'">
			<view class="uinp flex_start">{{provinces[index].name}}</view>
		</picker>
		<view class="readio">
			<label class="radio picker flex_start">
				<text>男士</text>
				<image src="../../static/img/choose.png" v-if="!isgroup" :checked="!isgroup" class="choose" mode="" @click="radio('1')"></image>
				<image src="../../static/img/chooseed.png" v-else :checked="isgroup" class="choose" mode="" @click="radio('1')"></image>
				<text style="margin-left: 230rpx;">女士</text>
				<image src="../../static/img/choose.png" v-if="isgroup" :checked="!isgroup" class="choose" mode="" @click="radio('2')"></image>
				<image src="../../static/img/chooseed.png" v-else :checked="isgroup" class="choose" mode="" @click="radio('2')"></image>
			</label>
		</view>
	</view>
</template>

<script>
  import provinces from '../../components/region-picker/region-picker.js';
	export default {
		data() {
			return {
				provinces: [],
				index: 0,
				isgroup:false,
				info: {
					name:'',
					phone:'',
					address:'',
					joinCity:'',
					sex: 2
				}
			};
		},
		onNavigationBarButtonTap(e) {
			this.submits()	
		},
		onLoad() {
			this.provinces = provinces.zones_tree
		},
		methods:{
			radio(num){
				this.info.sex = num
				if(num==1){
					this.isgroup = true
				}else{
					this.isgroup = false
				}
			},
			bindPickerChange(e) {
			    this.index = e.target.value
					this.info.joinCity = this.provinces[this.index].name
			},
			region_change(e){
				this.info.joinCity = e.detail.value[0]
			},
			submits(){
				this.info.sex = this.isgroup ? '男士':'女士'
				this.$utils.requert({url:'joinApply',type:'post',data:this.info}).then(res=>{
					if(res.code === 1 ){
						this.$utils.showLayer(res.message)
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0 25rpx;
		.readio{
			color: #BCBABC;
			font-size: 32rpx;
			margin-top: 60rpx;
			.choose{
				width: 34rpx;
				height: 34rpx;
				margin-left: 20rpx;
			}
		}
		.title{
			padding: 35rpx 0 14rpx;
			color: #333333;
			font-size: 34rpx;
		}
		.uinp{
			height: 86rpx;
			border: 2rpx solid #F4F3F3;
			border-radius: 7rpx;
			font-size: 32rpx;
			padding: 0 24rpx;
		}
	}
</style>
